<template>
  <div>
      <div class="back" @click="handleClick">
          <i class="iconfont icon-zuojiantou"></i>
      </div>
      <h1>{{title}}</h1>
    <div class="music_more" >
      <div class="more_item" v-for="item of musics" :key="item.id" @click="handleDetail(item.id)">
        <div class="More_img">
          <img :src="item.coverImgUrl" alt="" />
        </div>
        <div class="More_title">{{item.name}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      musics: [],
      title:""
    };
  },
  methods: {
      handleClick(){
            this.$router.back();
      },
      handleDetail(val){
          console.log(val);
          var id=val
          this.$router.push(`/MusicDetail/${id}`)
      }
  },
  mounted() {
    // console.log(this.$route.params);
    var { title } = this.$route.params;
    this.title=title;
    if (title == "热门音乐") {
      this.$http
        .get("http://47.108.197.28:3000/top/playlist/highquality")
        .then((res) => {
          console.log(res);
          this.musics = res.data.playlists;
          // console.log(this.nav[0].list);
        });
    }else if(title=="最新音乐"){
       this.$http
        .get("http://47.108.197.28:3000/album/newest")
        .then((res) => {
          res.data.albums.forEach(item=>{
              var {picUrl}=item;
              item.coverImgUrl=picUrl
          })
          this.musics = res.data.albums;
        }); 
    }else if(title=="主播电台"){
        this.$http
      .get("http://47.108.197.28:3000/personalized/djprogram")
      .then((res) => {
        res.data.result.forEach((item) => {
          var { picUrl } = item;
          item.coverImgUrl = picUrl;
        });
        this.musics = res.data.result;
        // console.log(this.nav[2].list);
      });
    }
  },
};
</script>

<style>
.music_more {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin:30px;
}
.more_item {
  width: 200px;
  height: 250px;
  /* border: 1px solid red; */
  margin: 10px;
}
.More_img{
    width: 190px;
    height: 210px;
    
    /* border: 1px solid #333; */
    margin: 5px auto;
}
.More_img img{
    width: 100%;
    height: 100%;
    border-radius: 20px;
}
.More_title{
    width: 190px;
    margin: 5px auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
h1 {
  text-align: center;
  padding: 10px !important;
  font-size: 35px !important;
  color: #fff;
  background-color: #b3d4df;
}
.back{
    position: relative;
}
.icon-zuojiantou{
    position: absolute;
    top: 4px;
    left: 20px;
    font-size: 50px;
    color: #fff;
}
</style>